<script setup lang="ts">

import {onBeforeMount, ref} from "vue";
import {backendService, ResponseCode} from "@/service/BackendService";

const query = ref({
  currentPage: 1,
  pageSize: 100,
  search: {
    name: undefined
  }
})

const page = ref({
  loading: false,
  total: 0,
  records: [],
  extra: {}
})

const updateDialog = ref<{
  visible: boolean
  title: string
  values: any
  errors: any
}>({
  visible: false,
  title: '',
  values: {},
  errors: {}
})

const fullscreenLoading = ref(false)

const onAdd = () => {
  updateDialog.value = {
    visible: true,
    title: '新增游戏',
    values: {},
    errors: {}
  }
}

const paginate = () => {
  page.value.loading = true
  backendService
      .post('/api/game/game/paginate', query.value)
      .then((response) => {
        let data = response.data
        if (data.code === ResponseCode.OK) {
          Object.assign(page.value, data.data)
        }
      })
      .catch((error: any) => {
        ElNotification({
          title: 'Error',
          message: error,
          type: 'error',
          dangerouslyUseHTMLString: true
        })
      })
      .finally(() => {
        page.value.loading = false
      })
}

const saveOrUpdate = () => {
  fullscreenLoading.value = true
  backendService
      .post('/api/game/game/saveOrUpdate', updateDialog.value.values)
      .then((response) => {
        ElNotification({
          title: 'Success',
          message: 'Save or update successfully',
          type: 'success',
          dangerouslyUseHTMLString: true
        })
        updateDialog.value.visible = false
      })
      .catch((error: any) => {
        let data = error?.response?.data
        if (data) {
          if (data.code === ResponseCode.METHOD_ARGUMENT_NOT_VALID) {
            updateDialog.value.errors = data.data
            ElNotification({
              title: 'Error',
              message: data.message,
              type: 'error',
              dangerouslyUseHTMLString: true
            })
            return
          }
        }
        ElNotification({
          title: 'Error',
          message: error,
          type: 'error',
          dangerouslyUseHTMLString: true
        })
      })
      .finally(() => {
        fullscreenLoading.value = false
        paginate()
      })
}

const onEdit = (row: any) => {
  updateDialog.value = {
    visible: true,
    title: '修改游戏',
    values: row,
    errors: {}
  }
}

const onDelete = (row: any) => {
  ElMessageBox.confirm(`是否确认删除 "${row.name}" 游戏`, '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
      .then(() => {
        page.value.loading = true
        backendService
            .post('/api/game/game/delete', { id: row.gameId })
            .then((response) => {
              let code = response?.data?.code
              if (code === ResponseCode.OK) {
                ElNotification({
                  title: '提示',
                  message: response?.data?.message,
                  type: 'success',
                  dangerouslyUseHTMLString: true
                })
              }
              paginate()
            })
            .catch((error: any) => {
              ElNotification({
                title: 'Error',
                message: error,
                type: 'error',
                dangerouslyUseHTMLString: true
              })
            })
            .finally(() => {
              page.value.loading = false
            })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消删除!'
        })
      })
}

onBeforeMount(()=>{
  paginate()
})

</script>

<template>
  <div class="admin-game-game">
    <el-card shadow="never">
      <el-form :inline="true" :model="query">
        <el-form-item label="游戏名称">
          <el-input v-model="query.search.name"></el-input>
        </el-form-item>
        <div style="text-align: right">
          <el-button type="primary" @click="paginate()" native-type="button">搜索</el-button>
        </div>
      </el-form>
    </el-card>
    <el-divider></el-divider>
    <el-card shadow="never">
      <template #header>
        <div class="card-header">
          <h3>子游戏列表</h3>
          <div>
            <el-button element-loading-background="rgba(122, 122, 122, 0.8)" @click="onAdd()">
              新增
            </el-button>
          </div>
        </div>
      </template>
      <el-table
          :border="true"
          :data="page.records"
          v-loading="page.loading"
          stripe
          style="width: 100%"
      >
        <el-table-column prop="gameId" label="#" width="200"/>
        <el-table-column prop="code" label="游戏代码"/>
        <el-table-column prop="name" label="游戏名称"/>
        <el-table-column prop="sortOrder" label="排序"/>
        <el-table-column prop="status" label="状态">
          <template #default="scope">
            <el-tag v-if="scope.row['status'] === 1" type="success"> 启用</el-tag>
            <el-tag v-else type="info">禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="dateAdded" label="添加时间"/>
        <el-table-column prop="dateModified" label="更新时间"/>
        <el-table-column label="操作" width="160" fixed="right">
          <template #default="scope">
            <el-button size="small" @click="onEdit(scope.row)">修改</el-button>
            <el-button type="danger" size="small" @click="onDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          style="margin-top: 20px"
          v-model:current-page="query.currentPage"
          v-model:page-size="query.pageSize"
          :page-sizes="[20, 50, 100, 200]"
          :total="page.total"
          @currentChange="paginate()"
          @sizeChange="paginate()"
          layout="total, sizes, prev, pager, next, jumper"
      />
    </el-card>
    <el-dialog
        v-model="updateDialog.visible"
        :title="updateDialog.title"
        :close-on-click-modal="false"
        width="60%"
    >
      <template #default>
        <el-form :model="updateDialog.values" label-width="240px">
          <el-form-item required label="游戏代码" :error="updateDialog.errors.code">
            <el-input v-model="updateDialog.values.code"></el-input>
          </el-form-item>
          <el-form-item required label="游戏名称" :error="updateDialog.errors.name">
            <el-input v-model="updateDialog.values.name"></el-input>
          </el-form-item>
          <el-form-item label="游戏描述" :error="updateDialog.errors.description">
            <el-input type="textarea" v-model="updateDialog.values.description"></el-input>
          </el-form-item>
          <el-form-item required label="大图标" :error="updateDialog.errors.banner">
            <el-input v-model="updateDialog.values.banner"></el-input>
          </el-form-item>
          <el-form-item required label="小图标" :error="updateDialog.errors.icon">
            <el-input v-model="updateDialog.values.icon"></el-input>
          </el-form-item>
          <el-form-item label="部署地址" :error="updateDialog.errors.deployment">
            <el-input v-model="updateDialog.values.deployment"></el-input>
          </el-form-item>
          <el-form-item required label="排序" :error="updateDialog.errors.sortOrder">
            <el-input v-model="updateDialog.values.sortOrder"></el-input>
          </el-form-item>
          <el-form-item required label="状态" :error="updateDialog.errors.status">
            <el-switch
                v-model="updateDialog.values.status"
                :active-value="1"
                :inactive-value="0"
            ></el-switch>
          </el-form-item>
          <el-form-item>
            <el-button
                type="primary"
                v-loading.fullscreen.lock="fullscreenLoading"
                element-loading-background="rgba(122, 122, 122, 0.2)"
                @click="saveOrUpdate()"
            >Submit
            </el-button>
            <el-button @click="updateDialog.visible = false">Cancel</el-button>
          </el-form-item>
        </el-form>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>

</style>